<!-- 
  @name: 添加账号
  @date: 2020.3.12
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="topview">
			<view class="item">
				<view class="left">账号名称</view>
				<input type="text" class="int" placeholder="账号名称" placeholder-class="phcolor" v-model.trim="userName" />
			</view>
			<view class="item">
				<view class="left">手机号</view>
				<input type="number" class="int" placeholder="输入手机号" placeholder-class="phcolor" v-model.trim="userPhone" />
			</view>
			<view class="item">
				<view class="left">登录密码</view>
				<input :password="true" class="int" placeholder="输入登录密码" placeholder-class="phcolor" v-model="userPwd" />
			</view>
			<!-- <view class="item bn">
				<view class="left">账号类型</view>
				<view class="btn" :class="userType === 0 ? 'sl' : ''" @tap="userType = 0">子运营商账号</view>
				<view class="btn l2" :class="userType === 1 ? 'sl' : ''" @tap="userType = 1">加注站管理员</view>
			</view> -->
		</view>
		
		<!-- 可用加注站 -->
		<view>
			<view class="tblank"></view>
			<view class="select-item" style="font-size: 34rpx;">选择可用加注站</view>
			<view class="select-item" :class="{'active':isSelectAll}" @tap="selectAll">
				全部加注站
				<view class="check_box">
					<view :class="isSelectAll ? '_ck1' : '_ck2'" ></view>
				</view>
			</view>
			<view class="title" @tap="$navigateTo('/pages/common/siteList')">
				<text class="left">部分加注站</text>
				<view class="arrow_nav"></view>
			</view>
			<view class="site_list">
				<view class="_btn" v-for="(it, ix) in siteList" :key="it.siteId">
					{{it.siteName}}
					<image class="icon-close2" src="/static/images/icon-close2.png" mode="aspectFill" @tap="removeItem(ix)"></image>
				</view>
			</view>
			<view class="list-view-blank"></view>
		</view>
		<!-- 可用加注站 -->
		<!-- <view class="can-list">
			<view class="title" @tap="$navigateTo('/pages/common/siteList?addAcc=a&userType=' + userType)">
				<text class="left">选择可用加注站</text>
				<view class="arrow_nav"></view>
			</view>
			<view class="site_list">
				<view class="_btn" v-for="(it, ix) in siteList" :key="it.siteId">{{it.siteName}}</view>
			</view>
		</view> -->
		
		<!-- 账号收益比例 -->
		<!-- <view class="set_num">
			<view class="num_int">
				<view class="_tip">账号收益比例</view>
				<view class="_btn les" @tap="count(1)"></view>
				<view class="_num"><input type="digit" v-model.number="earnRadio" /></view>
				<view class="_btn add" @tap="count(2)"></view>
				<view class="_tip2">%</view>
			</view>
		</view> -->
		
		<!-- 按钮 -->
		<button class="btn_submit" @tap="submit">确认添加</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				siteList: [],  //加注站集合
				isSelectAll: true,
				//信息
				userName:'', 
				userPhone: '',
				userPwd: '',
				userType: 0,
				siteIds: '',
				// earnRadio: 0,  //input显示的比例(int|String)
				// earnRadio2: 0,  //提交时的比例值(Double)
			}
		},
		watch:{
			siteList(newVal){
				if(newVal.length) {
					this.isSelectAll = false;
				} else {
					this.isSelectAll = true;
				} 
			}
		},
		onLoad() {
			uni.$on('common_chooseSite', this.chooseSite);
		},
		onUnload() {
			uni.$off('common_chooseSite', this.chooseSite);
		},
		methods: {
			//监听选择加注站
			chooseSite(e) {
				let obj = {};
				this.siteList = this.siteList.concat(e);
				this.siteList.forEach(item => obj[item.siteId] = item);
				this.siteList = Object.values(obj);
				obj = null;
			},
			selectAll() {
				this.isSelectAll = true;
				this.siteList = [];
			},
			removeItem(index) {
				this.siteList.splice(index,1);
			},
			//增加减少领取数
			count(n) {
				if(n === 1) {
					if(this.earnRadio > 0) this.earnRadio -= 1;
				} else {
					if(this.earnRadio < 100) this.earnRadio += 1;
				}
			},
			//提交
			submit() {
				if(!this.userName) {
					this.$showToast('请输入账户名称！');
					return;
				}
				if(!this.userPhone) {
					this.$showToast('请输入手机号！');
					return;
				} else if(!this.$tmp.REG_PHONE.test(this.userPhone)) {
					this.$showToast('请输入正确的手机号！');
					return;
				}
				if(!this.userPwd) {
					this.$showToast('请输入密码！');
					return;
				}
				// if(this.earnRadio === '' || this.earnRadio < 0 || this.earnRadio > 100) {
				// 	this.$showToast('请输入正确的收益比例！');
				// 	return;
				// } else {
				// 	this.earnRadio2 = this.$operation(this.earnRadio, '/', 100);
				// }
				this.siteIds = this.siteList.map(item => item.siteId).toString();
				this.submit2();
			},
			submit2() {
				this.$http({
					url: this.$api.accountUrl + 'addaccount',
					data: {
						staffName: this.userName,
						staffPhone: this.userPhone,
						staffPwd: this.userPwd,
						userType: this.userType,
						siteIds: this.siteIds,
						// earnRadio: this.earnRadio2
					}
				}).then(res => {
					this.$successToast('添加成功！');
					setTimeout(() => {
						uni.$emit('setAcc_addAccount', {});
					}, this.$tmp.TIME_SUC);
					this.$sucBack();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: $color-white;
	}
	
	/* 顶部区域 */
	.topview {
		width: 750rpx;
		padding-left: 40rpx;
		background-color: $color-white;
		.item.bn {
			border-bottom: none;
		}
		.item {
			width: 100%;
			padding: 40rpx 0;
			border-bottom: 1rpx solid $color-list;
			display: flex;
			flex-direction: row;
			align-items: center;
			.left {
				width: 230rpx;
			}
			.int {
				flex: 1;
				margin-right: 40rpx;
			}
			.btn {
				width: 200rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				font-size: 24rpx;
				background-color: $color-bg;
				border-radius: $border-radius-bm;
			}
			.btn.sl {
				color: $color-white;
				background-color: $color-primary;
			}
			.btn.l2 {
				margin-left: 30rpx;
			}
		}
	}
	
	/* 可用加注站 */
	.tblank {
		width: 750rpx;
		height: 51rpx;
		background-color: $color-white;
	}
	.select-item {
		background-color: #FFFFFF;
		padding: 10rpx 40rpx;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		&.active {
			color: #407CFF;
		}
	}
	.title {
		width: 750rpx;
		padding: 20rpx 40rpx;
		background-color: $color-white;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 32rpx;
		.arrow_nav {
			height: 26rpx;
			width: 13rpx;
		}
		.left {
			flex: 1;
		}
	}
	.site_list {
		margin: 0;
		padding: 20rpx 40rpx;
	}
	.list-view-blank {
		width: 100%;
		height: 30rpx;
		margin-bottom: 120rpx;
		background-color: $color-white;
	}
	
	
	/* 账号收益比例 */
	.set_num {
		margin-top: 20rpx;
		.num_int {
			._tip {
				width: 260rpx;
			}
			._tip2 {
				margin-left: 38rpx;
			}
		}
	}
	
	/* 按钮 */
	.btn_submit {
		margin-top: 100rpx;
	}
</style>
